<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉诺塔</title>
    <style>
        *{
             margin: 0;
            padding: 0;
        }
        .container{
            width: 900px;
            height: 600px;
            background-color: #ccc;
            margin: 50px auto 0;
            display: flex;
            justify-content: space-around;
            padding-top: 60px;
            padding-bottom: 30px;
            position: relative;
        }
        .container .cloumns{
            width: 30px;
            border-radius: 15px 15px 0 0;
            background-color: #26a2e0;
            display: flex;
            flex-direction: column-reverse;
        }
        .container .bot{
            position: absolute;
            left: 0;
            bottom: 0;
            height: 30px;
            width: 100%;
            background-color: #000;
        }
        .container .cloumns > div{
            width: 150px;
            height: 30px;
            border: 1px solid black;
            border-radius: 15px;
            background-color: rgb(247, 26, 26);
            margin-left: 50%;
            transform: translateX(-50%);
        }
        .btns{
            display: flex;
            width: 900px;
            margin: 20px auto 0;
            justify-content: space-around;
        }
       .btns > div > button{
            width: 30px;
            height: 30px;
            margin: 0 1em;
            cursor: pointer;
        }
        .container .success{
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:rgba(0, 0, 0, 0.5);
        }
        .container .success > div{
            width: 200px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 16px;
            font-weight: bold;
            background-color: aqua;
            color: #f00;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cloumns" id="c1">
        </div>
        <div class="cloumns" id="c2"></div>
        <div class="cloumns" id="c3"></div>
        <div class="bot"></div>
    <div class="success">
        <div>恭喜你，智商超人哦！！</div>
    </div>
    </div>
    <div class="btns">
        <div>
            <button data-from="c1" data-to="c3">左</button>
            <button data-from="c1" data-to="c2">右</button>
        </div>
        <div>
            <button data-from="c2" data-to="c1">左</button>
            <button data-from="c2" data-to="c3">右</button>
        </div>
        <div>
            <button data-from="c3" data-to="c2">左</button>
            <button data-from="c3" data-to="c1">右</button>
        </div>
    </div>
    <script>
        let c1 = document.getElementById('c1');
        let c2 = document.getElementById('c2');
        let c3 = document.getElementById('c3');
        const cloumns = {
            c1: [4,3, 2, 1],
            c2: [],
            c3: []
        }
        const minWidth = 60;
        const stepWidth = 40;
        function render() {
            createDom(cloumns.c1, c1);
            createDom(cloumns.c2, c2);
            createDom(cloumns.c3, c3);
        function createDom(arr, dom) {
            dom.innerHTML = '';
            for (let i = 0; i < arr.length; i++) {
                const n = arr[i];
                const div = document.createElement('div');
                div.style.width = minWidth + (n - 1) * stepWidth + 'px';
                dom.appendChild(div);
            }
        }
        }
    render();
    let btns = document.querySelectorAll('button');
    let success = document.getElementsByClassName('success')[0];
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = () => {
            var from = cloumns[btns[i].dataset.from];
            var to = cloumns[btns[i].dataset.to];
            move(from, to);
        }
    }
    function move(from, to) {
        if (from.length === 0) {
        return;
    }
    if (to.length === 0) {
        to.push(from.pop());
        render();
    }
    else{
        check(from, to);
    }
    }
    function check(from, to){
        const fromLast = from[from.length - 1];
        const toLast = to[to.length - 1];
    if(fromLast < toLast){
        to.push(from.pop());
        render();
    }else{
        return;
    }
    if(cloumns.c1.length === 0 && cloumns.c2.length === 0){
        success.style.opacity = 1;
        for(let i = 0; i < btns.length; i++){
            btns[i].style.opacity = 0;
        }
    }
}
    </script>
</body>
</html>